<template>
  <div>
    <div>
      <div>
        <label for="fileInput">
          <input
            id="fileInput"
            type="file"
            ref="fileInput"
            @change="handleFileChange"
          />
        </label>
      </div>
    </div>
    <el-form :model="form" :rules="formRules" label-width="100px" ref="form">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item label="生产产家" prop="producers">
        <el-input v-model="form.producers" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item label="品类" prop="cate_id">
        <el-input v-model="form.cate_id" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item label="生产产家ID" prop="producers_id">
        <el-input v-model="form.producers_id" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家联系方式" prop="phone">
        <el-input v-model="form.phone" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="cost">
        <el-input v-model="form.cost" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item>
        <div v-if="subShow">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">清空</el-button>
        </div>
        <div v-else>
          <el-button type="success" @click="addForm">新增</el-button>
          <el-button @click="resetForm">清空</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updateproduct, addproduct } from "../api/data";
export default {
  props: {
    hasProperty: {
      type: Boolean,
    },
    subShow: {
      type: Boolean,
    },
    tableForm: {
      type: Object,
    },
    upDataId: {},
  },
  data() {
    return {
      form: {
        name: this.tableForm.name ? this.tableForm.name : "",
        producers: this.tableForm.producers ? this.tableForm.producers : "",
        cate_id: this.tableForm.cate_id ? this.tableForm.cate_id : "",
        producers_id: this.tableForm.producers_id
          ? this.tableForm.producers_id
          : "",
        phone: this.tableForm.phone ? this.tableForm.phone : "",
        cost: this.tableForm.cost ? this.tableForm.cost : "",
        image: this.tableForm.image ? this.tableForm.image : null,
      },
      formRules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        producers: [
          { required: true, message: "生产商不能为空", trigger: "blur" },
        ],
        cate_id: [
          { required: true, message: "类别ID不能为空", trigger: "blur" },
        ],
        producers_id: [
          { required: true, message: "生产商ID不能为空", trigger: "blur" },
        ],
        phone: [{ required: true, message: "电话不能为空", trigger: "blur" }],
        cost: [{ required: true, message: "成本不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    addForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          formData.append("name", this.form.name);
          formData.append("producers", this.form.producers);
          formData.append("cate_id", this.form.cate_id);
          formData.append("producers_id", this.form.producers_id);
          formData.append("phone", this.form.phone);
          formData.append("cost", this.form.cost);
          formData.append("image", this.form.image);
          let params = formData;
          addproduct(params).then(({ data: res }) => {
            if (res == "添加商品成功") {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.resetForm();
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          });
        } else {
          console.log("Form validation failed");
        }
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          let formData = new FormData();
          formData.append("name", this.form.name);
          formData.append("producers", this.form.producers);
          formData.append("cate_id", this.form.cate_id);
          formData.append("producers_id", this.form.producers_id);
          formData.append("phone", this.form.phone);
          formData.append("cost", this.form.cost);
          formData.append("image", this.form.image);
          let params = [this.upDataId, formData];
          updateproduct(params).then((res) => {
            if (res.status == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$emit("child-button-click");
            } else {
              this.$message({
                message: "修改失败",
                type: "error",
              });
            }
          });
        } else {
          console.log("Form validation failed");
        }
      });
    },
    handleFileChange(event) {
      const file = this.$refs.fileInput.files[0];
      this.form.image = file;
    },
    resetForm() {
      this.form = {
        id: "",
        name: "",
        producers: "",
        cate_id: "",
        producers_id: "",
        phone: "",
        cost: "",
        image: null,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.custom-input {
  width: 200px; /* 设置输入框宽度为200px，根据需要进行调整 */
}
.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}
.file-upload {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 10px;
}
.file-upload-label {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>